<script setup lang="ts">
import { useDictLabel } from '@/hooks'
import { computeRate, formatRate } from '@/utils/common'
import { PivotTable, VTable } from '@visactor/vue-vtable'

defineProps({
  records: Array<any>,
})

const pivotTableRef = ref<InstanceType<typeof PivotTable>>()

const options = {
  title: {
    text: '三率数据统计表-年级维度',
    align: 'center',
    padding: [0, 0, 20, 0],
    textStyle: {

    },
  },
  emptyTip: {
    text: '选择查询条件后点击搜索',
  },
  widthMode: 'autoWidth',
  heightMode: 'autoHeight',
  autoFillWidth: true,
  // autoFillHeight: true,
  theme: VTable.themes.BRIGHT,
  hover: {
    highlightMode: 'row',
  },
  sortState: {
    field: 'renewalRate',
    order: 'desc',
  },
  rowHierarchyType: 'tree',
  rows: [
    {
      dimensionKey: 'grade',
      title: '年级',
      headerStyle: {
        textStick: true,
      },
      // drillDown: true,
      headerFormat: value => useDictLabel('Grade', value),
      width: 'auto',
    },
    {
      dimensionKey: 'leadTeacherName',
      title: '老师',
      width: 'auto',
    },
    {
      dimensionKey: 'classAndTeacher',
      title: '班级',
      width: 'auto',
    },
  ],
  indicators: [
    {
      indicatorKey: 'plannedStudentCount',
      title: '班级限额',
      sort: true,
    },
    {
      indicatorKey: 'passedStudentCount',
      title: '在读人数',
      sort: true,
    },
    {
      indicatorKey: 'cancelStudentCount',
      title: '退费人数',
      sort: true,
    },
    {
      indicatorKey: 'renewalStudentCount',
      title: '续报人数',
      sort: true,
    },
    {
      indicatorKey: 'retainedStudentCount',
      title: '留存人数',
      sort: true,
    },
    {
      indicatorKey: 'fullRateComputed',
      title: '满班率',
      sort: true,
      format: formatRate,
    },
    {
      indicatorKey: 'renewalRateComputed',
      title: '续报率',
      sort: true,
      format: formatRate,
    },
    {
      indicatorKey: 'cancelRateComputed',
      title: '退费率',
      sort: true,
      format: formatRate,
    },
    {
      indicatorKey: 'retainedRateComputed',
      title: '留存率',
      sort: true,
      format: formatRate,
    },
  ],
  corner: {
    titleOnDimension: 'row',
    headerStyle: {
      textStick: true,
    },
  },
  dataConfig: {
    // 数据汇总规则
    totals: {
      row: {
        showGrandTotals: true,
        showSubTotals: true,
        subTotalsDimensions: ['grade', 'leadTeacherName'],
        grandTotalLabel: '总计',
        subTotalLabel: '小计',
        // showGrandTotalsOnTop: false, // 汇总值显示在上
      },
    },
    // 排序规则
    sortRules: [
      { sortField: 'grade', sortType: 'ASC' },
    ],
    // 聚合方式
    aggregationRules: [

    ],
    // 派生字段
    derivedFieldRules: [
      {
        fieldName: 'classAndTeacher',
        derivedFunc: (record) => {
          return `${record.className}-${record.leadTeacherName}`
        },
      },
    ],
    // 透视表计算字段
    calculatedFieldRules: [
      {
        key: 'fullRateComputed',
        dependIndicatorKeys: ['passedStudentCount', 'plannedStudentCount'],
        calculateFun: dependValue => computeRate(dependValue.passedStudentCount, dependValue.plannedStudentCount),
      },
      {
        key: 'renewalRateComputed',
        dependIndicatorKeys: ['renewalStudentCount', 'passedStudentCount'],
        calculateFun: dependValue => computeRate(dependValue.renewalStudentCount, dependValue.passedStudentCount),
      },
      {
        key: 'cancelRateComputed',
        dependIndicatorKeys: ['cancelStudentCount', 'passedStudentCount'],
        calculateFun: dependValue => computeRate(dependValue.cancelStudentCount, dependValue.passedStudentCount + dependValue.cancelStudentCount),
      },
      {
        key: 'retainedRateComputed',
        dependIndicatorKeys: ['retainedStudentCount', 'cancelStudentCount', 'passedStudentCount'],
        calculateFun: dependValue => computeRate(dependValue.retainedStudentCount, dependValue.passedStudentCount + dependValue.cancelStudentCount),
      },
    ],
  },
}

onMounted(() => {
})
</script>

<template>
  <PivotTable ref="pivotTableRef" :options="options" :records="records" />
</template>

<style scoped>

</style>
